import React from 'react';
import { Image, Text, TouchableOpacity, View, ImageBackground, Animated, Easing } from 'react-native';
import Colors from "../constants/Colors";
import { unitWidth, width, height } from "../constants/AdapterUtil";
import * as Animatable from 'react-native-animatable';
import NavigationService from '../constants/NavigationService';
import { api_member_cart_add } from '../constants/HttpServices';
import { postFetch } from '../constants/HttpExtension';
import { show } from '../constants/Toast';
import RootModal from "react-native-root-modal";

//长条渐变色按钮
export class SubmitButton1 extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    width: 291 * unitWidth,
                    height: 45 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/bg_button_1.png')} resizeMode='stretch'>
                    <Text style={{ color: Colors.white, fontSize: 16 }}>{this.props.text}</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

//长条灰色按钮
export class SubmitButton2 extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    width: 291 * unitWidth,
                    height: 45 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/bg_button_2.png')} resizeMode='stretch'>
                    <Text style={{ color: Colors.colorcc, fontSize: 16 }}>{this.props.text}</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

//长条渐变色按钮,比SubmitButton1短一点
export class SubmitButton3 extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    width: 253 * unitWidth,
                    height: 45 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/me_bbgxbtn.png')} resizeMode='stretch'>
                    <Text style={{ color: Colors.white, fontSize: 16 }}>{this.props.text}</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

//长条渐变色按钮,比SubmitButton3短
export class SubmitButton4 extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    width: 105 * unitWidth,
                    height: 34 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/spxq_btnljgm.png')} resizeMode='stretch'>
                    <Text style={{ color: Colors.white, fontSize: 16 }}>{this.props.text}</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

//金色短按钮
export class SubmitButton5 extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    width: 105 * unitWidth,
                    height: 34 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/spxq_btnjrgwc.png')} resizeMode='stretch'>
                    <Text style={{ color: Colors.white, fontSize: 16 }}>{this.props.text}</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

//长条渐变色按钮,比SubmitButton4短
export class SubmitButton6 extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    width: 49 * unitWidth,
                    height: 23 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/sy_sskkss.png')} resizeMode='stretch'>
                    <Text style={{ color: Colors.white, fontSize: 12 }}>{this.props.text}</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

//长条渐变色按钮,比SubmitButton6长
export class SubmitButton7 extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    width: 80 * unitWidth,
                    height: 25 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/zgd_btnljbj.png')} resizeMode='stretch'>
                    <Text style={{ color: Colors.white, fontSize: 12 }}>{this.props.text}</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

//购物车底部用到的按钮
export class SubmitButton8 extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    width: 100 * unitWidth,
                    height: 32 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/gwc_jiesuanjsbtn.png')} resizeMode='stretch'>
                    <Text style={{ color: Colors.white, fontSize: 14 }}>{this.props.text}</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

//购物车底部用到的按钮
export class SubmitButton9 extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    width: 100 * unitWidth,
                    height: 32 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/gwc_jiesuanjsbtn2.png')} resizeMode='stretch'>
                    <Text style={{ color: Colors.colorOrange, fontSize: 14 }}>{this.props.text}</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

//订单中心用到
export class SubmitButton10 extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    width: 75 * unitWidth,
                    height: 29 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/ddzx_btnqxdd.png')} resizeMode='stretch'>
                    <Text style={{ color: Colors.color66, fontSize: 14 }}>{this.props.text}</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

//订单中心用到
export class SubmitButton11 extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <View style={{
                    minWidth: 75 * unitWidth,
                    height: 29 * unitWidth,
                    paddingHorizontal: 6 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                    borderRadius: 15,
                    borderWidth: 0.5,
                    borderColor: Colors.colorOrange
                }}>
                    <Text style={{ color: Colors.colorOrange, fontSize: 14 }}>{this.props.text}</Text>
                </View>
            </TouchableOpacity>
        );
    }
}

//订单中心用到
export class SubmitButton12 extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    minWidth: 75 * unitWidth,
                    height: 29 * unitWidth,
                    paddingHorizontal: 6 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/ddzx_btnfk.png')} resizeMode='stretch'>
                    <Text style={{ color: Colors.white, fontSize: 14 }}>{this.props.text}</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

//
export class SubmitButton13 extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    width: 105 * unitWidth,
                    height: 34 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/ddzx_xqbtnqxdd.png')} resizeMode='stretch'>
                    <Text style={{ color: Colors.color66, fontSize: 14 }}>{this.props.text}</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

export class SubmitButton14 extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <View style={{
                    minWidth: 75 * unitWidth,
                    height: 29 * unitWidth,
                    paddingHorizontal: 6 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                    borderRadius: 15,
                    borderWidth: 0.5,
                    borderColor: Colors.color99
                }}>
                    <Text style={{ color: Colors.color99, fontSize: 14 }}>{this.props.text}</Text>
                </View>
            </TouchableOpacity>
        );
    }
}

//订单中心用到
export class SubmitButton15 extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    minWidth: 110 * unitWidth,
                    height: 29 * unitWidth,
                    paddingHorizontal: 6 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/zx_xqbtnqsdz.png')} resizeMode='stretch'>
                    <Text style={{ color: Colors.white, fontSize: 14 }}>{this.props.text}</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

//订单中心用到
export class ChooseButton extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    width: 75 * unitWidth,
                    height: 24 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={this.props.currentChoose == this.props.index ? require('../res/ddzx_btnqb1.png') : require('../res/ddzx_btnqb2.png')} resizeMode='stretch'>
                    <Text style={{ color: this.props.currentChoose == this.props.index ? Colors.white : Colors.black, fontSize: 14 }}>{this.props.text}</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

export class ChooseButton2 extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    width: 60 * unitWidth,
                    height: 24 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={this.props.currentChoose == this.props.index ? require('../res/ddzx_btnqb1.png') : require('../res/ddzx_btnqb2.png')} resizeMode='stretch'>
                    <Text style={{ color: this.props.currentChoose == this.props.index ? Colors.white : Colors.black, fontSize: 14 }}>{this.props.text}</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

//购物车减数量按钮
export class ReduceButton extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <Image style={{
                    width: 15 * unitWidth,
                    height: 15 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/gwc_jh.png')} resizeMode='stretch' />
            </TouchableOpacity>
        );
    }
}

//购物车加数量按钮
export class AddButton extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={this.props.onPress} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <Image style={{
                    width: 15 * unitWidth,
                    height: 15 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/gwc_jh2.png')} resizeMode='stretch' />
            </TouchableOpacity>
        );
    }
}

//实名认证
export class SMButton extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={() => {
                NavigationService.navigate('ShowSMRZ', { id: this.props.id })
            }} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    width: 65 * unitWidth,
                    height: 22 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/syss_smrz.png')} resizeMode='stretch'>
                    <Text style={{ color: Colors.colorOrange, fontSize: 13 }}>实名认证</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

//实地认证
export class SDButton extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <TouchableOpacity onPress={() => {
                NavigationService.navigate('ShowSDRZ', { id: this.props.id })
            }} style={[{
            }, this.props.style]} activeOpacity={0.7}>
                <ImageBackground style={{
                    width: 65 * unitWidth,
                    height: 22 * unitWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                }} source={require('../res/syss_smrz.png')} resizeMode='stretch'>
                    <Text style={{ color: Colors.colorOrange, fontSize: 13 }}>实地认证</Text>
                </ImageBackground>
            </TouchableOpacity>
        );
    }
}

//添加购物车按钮
export class AddShoppingCartButton extends React.Component {

    render() {
        return (
            <Animatable.View ref='view'
                style={[{
                    justifyContent: 'center',
                    alignItems: 'center',
                }, this.props.style]}>
                <TouchableOpacity onPress={() => {
                    this.refs.view.bounceIn(800).then(endState => console.log(endState.finished ? 'bounce finished' : 'bounce cancelled'));
                    this.add(this.props.id, 1)
                }} style={{}} activeOpacity={0.7}>
                    <Image style={{
                        width: 23 * unitWidth,
                        height: 23 * unitWidth,
                        justifyContent: 'center',
                        alignItems: 'center',
                    }} source={require('../res/ic_spbuybtn.png')} resizeMode='stretch' />
                </TouchableOpacity>
            </Animatable.View>
        );
    }

    //添加购物车
    add(id, total) {
        let params = {
            id: id,
            total: total
        }
        postFetch(api_member_cart_add, params, {
            success: (response) => {
                show('添加成功');
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}

//添加购物车按钮
export class AddShoppingCartButton2 extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            animValue: new Animated.Value(0),
            fromPageX: 0, // from event.nativeEvent.changedTouches[0]
            fromPageY: 0,
            toPageX: 0,
            toPageY: 0,
            visible: false,
        };
    }

    showModal = () => {
        this.setState({
            visible: true
        })
    };

    hideModal = () => {
        this.setState({
            visible: false
        })
    };

    render() {
        const {
            animValue,
            fromPageX,
            fromPageY,
            toPageX,
            toPageY
        } = this.state;

        return (
            <View style={[{
                justifyContent: 'center',
                alignItems: 'center',
            }, this.props.style]}>
                <RootModal
                    style={{
                        top: fromPageY,
                        // right: 0,
                        // bottom: 0,
                        left: fromPageX,
                        position: 'absolute',
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}
                    visible={this.state.visible}>
                    <Animated.View
                        style={{
                            justifyContent: 'center',
                            alignItems: 'center',
                            // opacity: animValue.interpolate({
                            //     inputRange: [0, 1],
                            //     outputRange: [1, 0]
                            // }),
                            transform: [
                                {
                                    translateX: animValue.interpolate({
                                        // inputRange: [0, 0.3, 0.6, 1],
                                        // outputRange: [0, 0.3 * toPageX, 0.6 * toPageX, toPageX]
                                        inputRange: [0, 1],
                                        outputRange: [0, toPageX]
                                    })
                                },
                                {
                                    translateY: animValue.interpolate({
                                        // inputRange: [0, 0.3, 0.6, 1],
                                        // outputRange: [0, Math.sqrt(Math.abs(1.8 * toPageX)), Math.sqrt(Math.abs(3.6 * toPageX)), toPageY]
                                        inputRange: [0, 1],
                                        outputRange: [0, toPageY]
                                    })
                                },
                                {
                                    rotate: animValue.interpolate({
                                        inputRange: [0, 1],
                                        outputRange: ['0deg', '180deg']
                                    })
                                },
                                {
                                    scale: animValue.interpolate({
                                        inputRange: [0, 1],
                                        outputRange: [1, 0]
                                    })
                                }
                            ]
                        }}>
                        <View style={{}}>
                            <Image style={{
                                width: 23 * unitWidth,
                                height: 23 * unitWidth,
                                justifyContent: 'center',
                                alignItems: 'center',
                            }} source={require('../res/ic_spbuybtn.png')} resizeMode='stretch' />
                        </View>
                    </Animated.View>
                </RootModal>
                <TouchableOpacity ref='view' onPress={() => {
                    this.add(this.props.id, 1)
                    this.refs.view.measure((frameX, frameY, frameWidth, frameHeight, pageX, pageY) => {
                        this.setState({
                            toPageX: (250 * unitWidth) - pageX,
                            toPageY: height - pageY - (45 * unitWidth),
                            fromPageX: pageX,
                            fromPageY: pageY
                        }, () => {
                            console.log(pageX + '           ' + pageY + '           ' + width + '           ' + height)
                            this.showModal()
                            this.state.animValue.setValue(0)
                            Animated.timing(this.state.animValue, {
                                toValue: 1,
                                duration: 777,
                                useNativeDriver: true,
                            }).start(() => {
                                this.hideModal()
                            });
                        })
                    });
                }} style={{ position: 'absolute' }} activeOpacity={0.7}>
                    <Image style={{
                        width: 23 * unitWidth,
                        height: 23 * unitWidth,
                        justifyContent: 'center',
                        alignItems: 'center',
                    }} source={require('../res/ic_spbuybtn.png')} resizeMode='stretch' />
                </TouchableOpacity>
            </View>
        );
    }

    //添加购物车
    add(id, total) {
        let params = {
            id: id,
            total: total
        }
        postFetch(api_member_cart_add, params, {
            success: (response) => {
                show('添加成功');
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}

export class AnimatedButton extends React.Component {
    render() {
        return (//View加大返回按钮点击范围
            <Animatable.View ref='view'
                style={[{
                    justifyContent: 'center',
                    alignItems: 'center',
                }, this.props.style]}>
                <TouchableOpacity onPress={() => {
                    this.refs.view.bounceIn(800).then(endState => console.log(endState.finished ? 'bounce finished' : 'bounce cancelled'));
                    this.props.onPress ? this.props.onPress() : null
                }}>
                    {this.props.children}
                </TouchableOpacity>
            </Animatable.View>
        );
    }
}